<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐</title>
    <link rel="stylesheet" href="assets/css/base.css">
    <link rel="stylesheet" href="assets/css/index.css">
</head>

<body>
    <!-- 头部区域 -->
    <div class="g-topbar">
        <!-- 头部导航栏 -->
        <div class="m-top">
            <div class="top-wrap">
                <!-- logo区域 -->
                <h1 class="logo">
                    <a href="javascript:;">网易云音乐</a>
                </h1>
                <!-- 导航栏 -->
                <ul class="m-nav">
                    <li class="frist-nav"><a href="javascript:;">发现音乐</a></li>
                    <li><a href="javascript:;">我的音乐</a></li>
                    <li><a href="javascript:;">朋友</a></li>
                    <li><a href="javascript:;">商城</a></li>
                    <li><a href="javascript:;">音乐人</a></li>
                    <li><a href="javascript:;">下载客户端</a></li>
                </ul>
                <!-- 搜索框区域 -->
                <div class="m-search">
                    <input type="search" name="search" class="input-search" placeholder="音乐/视频/电台/用户">
                </div>
                <!-- 创作者中心 -->
                <a href="javascript:;" class="m-creation">创作者中心</a>
                <!-- 登录 -->
                <a href="javascript:;" class="btn-login">登录</a>
            </div>
        </div>
        <!-- 子导航栏 -->
        <div class="m-subnav">
            <div class="n-wrap">
                <ul class="nav">
                    <li><a href="main.html" target="fm" class="z-list"><em class="first-em">推荐</em></a></li>
                    <li><a href="mList.html" target="fm" class="z-list"><em>排行榜</em></a></li>
                    <li><a href="playList.html" target="fm" class="z-list"><em>歌单</em></a></li>
                    <li><a href="main.html" target="fm" class="z-list"><em>主播电台</em></a></li>
                    <li><a href="main.html" target="fm" class="z-list"><em>歌手</em></a></li>
                    <li><a href="newDisc.html" target="fm" class="z-list"><em>新碟上架</em></a></li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 主体内容 -->
    <div class="g-main">
        <!-- 嵌套页面ifarm -->
        <iframe src="main.html" class="g-ifarm" frameborder="0" width="100%" name="fm"></iframe>
    </div>
    <!-- 底部导航栏 -->
    <div class="g-ft">
        <div class="m-ft"></div>

    </div>
    <!-- 固定导航栏 -->
    <div class="m-btmbar">
        <audio src="assets/music/骁.mp3" id="audio"></audio>
        <div class="wrap">
            <!-- 播放暂停 -->
            <div class="btns">
                <a href="javascript:;" class="prv"></a>
                <a href="javascript:;" class="ply" id="ply"></a>
                <a href="javascript:;" class="nxt"></a>
            </div>
            <!-- 歌曲封面 -->
            <div class="head">
                <a href="javascript:;" class="msk">
                    <img src="assets/images/m2.png" alt="">
                </a>
            </div>
            <!-- 播放进度条 -->
            <div class="play">
                <div class="p-wrap">
                    <div class="words">
                        <a href="javascript:;" class="u-name">骁</a>
                        <a href="javascript:;" class="n-name">井迪</a>
                        <span>井胧</span>
                    </div>
                    <!-- 进度条 -->
                    <div class="m-pbar">
                        <span class="f-tdn" id="tdn"></span>
                        <!-- 进度控制条，跟随歌曲播放 -->
                        <div class="bar"></div>
                    </div>
                </div>
                <span class="j-time"><i>00:59</i>/01:15</span>
            </div>
            <!-- 点赞分享 -->
            <div class="oper">
                <a href="javascript:;" class="icn-add"></a>
                <a href="javascript:;" class="icn-share"></a>
            </div>
            <!-- 功能按钮 -->
            <div class="crtl">
                <a href="javascript:;" class=icn-vol "></a>
                <a href="javascript:; " class="icn-loop "></a>
                <a href="javascript:; " class="icn-list "><i>111</i></a>
            </div>
        </div>
    </div>
    <script src="assets/lib/jquery.js "></script>
    <script src="assets/js/index.js "></script>
</body>

</html>